前言

在 JavaScript 中有三種變數宣告方式：var、let、const。

相信剛學習 JavaScript 的菜鳥們 ( 舉手 )，常常會困惑：
「它們有什麼差別？為什麼現代開發幾乎不再使用 var？」

本文將帶你透過表格、程式碼範例與實務建議，快速理解這三者的差異。

關於歷史脈絡：

1995–2015：var 是唯一的變數宣告方式。

1995 年：JavaScript 由 Brendan Eich 在 Netscape 瀏覽器中創造。
當時語言設計非常倉促（短短 10 天），為了簡單快速，唯一的變數宣告方式就是 var。**

隨著 JavaScript 在網頁中規模中日漸擴大，"速成"的 var 帶來的全域汙染問題，推動了改版的需求。

2015 (ES6) 後：let、const 取代 var，成為現代標準。
|| ECMAScript 2015 (6th Edition) ||

改進重點：

1. 有 區塊作用域，不會意外外洩。
2. 不可重複宣告，減少 bug。
3. const 讓變數不可重新賦值，增加安全性。

差異總覽

以下表格整理了三者在 作用域 (Scope)、是否可重新賦值 (Reassign)、是否可重複宣告 (Redeclare)、是否提升 (Hoisting) 上的差別：

從表格中可以看出，var 可以、 let 和 const 不行的項目，就是開發者認為有缺陷需要改進的地方！

範例程式碼比較

var 的提升 (Hoisting)

console.log(a); // undefined
var a = 10;

var 會被提升到作用域頂端，但值不會一起提升，因此會輸出 undefined。

let 的暫時性死區 (Temporal Dead Zone)

console.log(b); // ReferenceError
let b = 10;

let 變數雖然也會被提升，但在宣告前存取會報錯。

const 的不可重新賦值

const c = 10;
c = 20; // TypeError

const 一旦賦值後不能改變，但注意：物件和陣列的內容仍可變動。

const obj = { name: "A" };
obj.name = "B"; // ✅ 合法，因為改的是內容

為什麼要用 let、const 取代 var？

1. 避免全域汙染：var 在全域下會變成 window 的屬性，容易造成變數衝突。
   ( 如果不小心和瀏覽器內建屬性或其他程式碼的變數同名，就可能「覆蓋」，造成程式碼錯誤。 )
2. 作用域更清晰：let 和 const 支援區塊作用域，能減少 bug。
3. 更符合現代規範：ES6 後幾乎所有程式碼風格指南（如 Airbnb、ESLint）都建議使用 let、const。

實務建議

• 預設使用 const，確保變數不會被誤改。
• 只有需要重新賦值時，才使用 let。
• 幾乎 不要再使用 var。

常見陷阱：for 迴圈

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// 輸出：3, 3, 3

因為 var 沒有 block scope，i 最後變成 3。

改用 let：

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// 輸出：0, 1, 2

總結

• var → 有函式作用域、會被提升，但容易汙染全域，不建議使用。
• let → 區塊作用域、可重新賦值，是更安全的選擇。
• const → 區塊作用域、不可重新賦值，最推薦預設使用。

👉 最佳實務：const > let > var

延伸閱讀

• MDN - var
• MDN - let
• MDN - const